<template>
    <div id="Take">

        <div class="list">
            <ul>
                <li :key="i" v-for="(v,i) in order">
                    <div class="tit2">
                        <p><span></span>订单时间：{{v.createTime}}</p>
                        <p class="cal">待收货</p>
                    </div>
                    <div class="picBox">
                        <div class="left"><img :src="src"></div>
                        <div class="right">
                            <p class="explain">【新品首发】艾草青团（蛋黄肉松味）240g</p>
                            <div>
                                <p>￥19.9</p>
                                <p>x1</p>
                            </div>
                        </div>
                    </div>
                    <div class="bot">
                        <p>共计<span>1</span>件商品</p>
                        <p>应付总额：<span>￥29.9</span></p>
                    </div>
                    <div class="btn">
                        <button>再次购买</button>
                        <button>去评价</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {formatTime} from '../../util/util'
    export default {
        name: "Take",
        data(){
            return{
                src:'',
                order:[]
            }
        },
        mounted(){
            this.axios({
                method: 'get',
                url: '/api/orderOperation/selectSendStatus',
                params: {
                    "userId":"1"
                }
            }).then((res)=>{
                res.data.data.map(v=>{
                    v.createTime=formatTime(new Date(v.createTime))
                })
                this.order=res.data.data
            }).catch(()=>{
                console.log('网络错误')
            })
        }
    }
</script>

<style scoped lang="less">
    @baseFontSize:20px;
    @baseSize:20;
    html{
        font-size: @baseFontSize;
    }
    .px2rem(@name,@px){
            @{name}:@px / 2 / @baseSize * 1rem;
    }

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    #Take{
        .tit2{
            .px2rem(margin-top,30);
            display: flex;
            .px2rem(font-size,30);
            .px2rem(padding-left,30);
            .px2rem(padding-right,30);
            p:first-child{
                .px2rem(width,600);
                .px2rem(height,90);
            }
            .cal{
                text-align: right;
                color: red;
            }
        }
        .list{
            ul{
                li{
                    display: flex;
                    .px2rem(height,520);
                    flex-wrap: wrap;
                    .picBox{
                        background: gainsboro;
                        display: flex;
                        .px2rem(height,220);
                        .left{
                            .px2rem(margin-top,25);
                            .px2rem(margin-left,25);
                            .px2rem(width,170);
                            .px2rem(height,170);
                            border: 1px solid gray;
                            box-sizing: border-box;
                        }
                        .right{
                            display: flex;
                            .px2rem(font-size,30);
                            .px2rem(width,520);
                            .px2rem(margin-left,35);
                            .explain{
                                .px2rem(width,330);
                                .px2rem(margin-top,25);
                            }
                            div{
                                .px2rem(margin-top,25);
                                .px2rem(margin-left,80);
                                p{
                                    text-align: right;
                                    &:first-child{
                                        color: red;
                                    }
                                    &:last-child{
                                        .px2rem(margin-top,75);
                                    }
                                }
                            }
                        }
                    }
                    .bot{
                        display: flex;
                        .px2rem(font-size,25);
                        border-bottom: 1px solid gray;
                        p{
                            span{
                                color: red;
                            }
                            &:first-child{
                                .px2rem(margin-left,370);
                                .px2rem(line-height,80);
                            }
                            &:last-child{
                                .px2rem(margin-left,20);
                                .px2rem(line-height,80);
                            }

                        }
                    }
                    .btn{
                        display: flex;
                        .px2rem(margin-top,25);
                        button:first-child{
                            .px2rem(margin-left,400);
                        }
                        button:last-child{
                            background: orangered;
                        }
                        button{
                            .px2rem(width,150);
                            .px2rem(height,60);
                            background: white;
                            outline: none;
                            border: 1px solid gray;
                            .px2rem(margin-left,25);
                        }
                    }
                }
            }
        }
    }
</style>